<template>
    <view class="container">
            <view class="Box">
              <u-list @scrolltolower="scrolltolower" scrollTop="50">
                <u-list-item>
                  <view class="goods" v-for="item in list" >
                    <view class="goods-left">
                      <image :src="item.hire.thumbs_text[0]" lazy-load></image>
                    </view>
                    <view class="goods-right">
                      <view class="txt-line2"><text class="tag">奢总汇</text>
                        <span>{{
                          item.hire.brankname_text + item.hire.btypename_text + item.hire.name }}</span>
                      
                      </view>
                      <view class="box" style="margin-bottom: 20px;">
                        <view class="coupon">
                          <text>50元券</text>
                        </view>
                        <view class="bottom-txt">
                          <view>
                            <text class="price">￥{{ item.hire.price }}</text>
                            <!-- <text class="del-price">￥600</text> -->
                          </view>
                          <!-- <view class="sale-num"><text>已售300</text></view> -->
                        </view>
                      </view>
                    </view>
                  </view>
                </u-list-item>
              </u-list>
            </view>
    </view>
</template>
<script>
export default {
    onLoad()
    {
        this.businessinfo = this.$u.business.check()
        this.gethomelist()

    },
    data()
    {
        return {
            businessinfo:{},
            list:[]

        }
    },
    methods:{

        // 获取商品数据
    async gethomelist() {
      let result = await this.$u.api.product.collectiongoods({busid:this.businessinfo.id});
      if (result.code) {
        this.list = result.data;
      }
    },

    }
}
</script>

<style scoped lang="scss">
    .container{
        padding: 10px;
    }
    .Box {
    .goods {
      padding:10rpx;
      display: flex;
      font-size: 28rpx;
    }

    .goods-left {
      flex: 0 0 41%;
      margin-right: 75rpx;

      image {
        width: 100%;
        height: 250rpx;
        border-radius: 5px;
      }
    }

    .goods-right {
      display: flex;
      margin-left:-25px;
      flex-direction: column;
      justify-content: space-between;
      .box{
        padding-top: -18px;
      }

      .bottom {
        margin-bottom: 4px;
        font-weight: normal;
      }

      .tag {
        background-color: red;
        color: #fff;
        font-size: 20rpx;
        font-weight: normal;
        line-height: 1;
        padding: 4rpx 6rpx;
        border-radius: 4px;
        margin-right: 4px;
      }
    }

    .coupon {
      padding: 10rpx 30rpx;
      width: 40%;
      background-image: url('../../static/coupon1.png');
      background-size: 100% 100%;
      color: #fff;
      font-size: 24rpx;
      font-weight: normal;
      margin-bottom: 10rpx;
    }
    .bottom-txt {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    
      .price {
        color: red;
        font-size: 40rpx;
        font-weight: 600;
    
        text {
          font-size: 24rpx;
        }
      }
    
      .del-price {
        color: #666;
        font-weight: 600;
        font-size: 24rpx;
        text-decoration: line-through;
        margin-left: 4px;
      }
    
      .sale-num {
        color: #888;
        font-size: 24rpx;
        font-weight: normal;
        margin-bottom: 2px;
      }
    }
  }
</style>